import Vue from 'vue'
// 只是起了个变量名，名字不一样 import VueRouter from 'vue-router'
// 一定要记住欠你钱的人是谁，哪怕他换了名字带了个帽子也要认出来
import Router from 'vue-router'

Vue.use(Router) // 使用Router插件

/* Layout架子，一级路由 */
import Layout from '@/layout'
// 引入多个模块的规则
import approvalsRouter from '@/router/modules/approvals'
import attendancesRouter from '@/router/modules/attendances'
import departmentsRouter from '@/router/modules/departments'
import employeesRouter from '@/router/modules/employees'
import permissionRouter from '@/router/modules/permission'
import salarysRouter from '@/router/modules/salarys'
import settingRouter from '@/router/modules/setting'
import socialRouter from '@/router/modules/social'

// 动态路由表 => 动态路由(需要权限才可以访问的) 我们这里准备一个数组存放
export const asyncRoutes = [
  departmentsRouter,
  settingRouter,
  employeesRouter,
  permissionRouter,
  approvalsRouter,
  attendancesRouter,
  salarysRouter,
  socialRouter
]
/**
 * Note: sub-menu only appear when route children.length >= 1
 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 *
 * hidden: true                   if set true, item will not show in the sidebar(default is false)
 * alwaysShow: true               if set true, will always show the root menu
 *                                if not set alwaysShow, when item has more than one children route,
 *                                it will becomes nested mode, otherwise not show the root menu
 * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
 * name:'router-name'             the name is used by <keep-alive> (must set!!!)
 * meta : {
    roles: ['admin','editor']    control the page roles (you can set multiple roles)
    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
  }
 */

/**
 * constantRoutes
 * a base page that does not have permission requirements
 * all roles can be accessed
 */

/**
  * hidden 显示和隐藏用的
  * true 隐藏
  * false 不隐藏 - 光一个false并不能看到菜单,还要配置meta路由元 title指的是标题 icon是图标
  * children
  * 没有配置 说明没有孩子 一级菜单
  * 配置了children 只有一个孩子 一级菜单
  * 配置了children 多个孩子 多级菜单
*/

// 静态路由
export const constantRoutes = [
  // 登录 一级理由
  {
    path: '/login',
    // 路由懒加载 - 箭头函数 - 函数就是会执行，什么时候执行 匹配到路径的时候就会执行
    component: () => import('@/views/login/index'),
    hidden: true // 菜单隐藏
  },

  // 404 一级理由
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  // 首页模块
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard', // 重定向到首页
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '首页', icon: 'dashboard' }
    }]
  },
  // approvalsRouter,
  // attendancesRouter,
  // depamentsRouter,
  // employeesRouter,
  // permissionRouter,
  // salarysRouter,
  // settingRouter,
  // socialRouter,

  // 组织架构模块
  // {
  //   path: '/departments', // 路径
  //   component: Layout, // 组件
  //   children: [{
  //     path: 'departments',
  //     name: 'departments',
  //     component: () => import('@/views/departments/index'),
  //     meta: { title: '组织架构', icon: 'tree' }
  //   }]
  // },
  {
    path: '/import',
    component: Layout,
    hidden: true, // 隐藏在左侧菜单中
    children: [{
      path: '', // 二级路由path什么都不写 表示二级默认路由
      component: () => import('@/views/import')
    }]
  },
  // 测试用
  {
    path: '/playground',
    component: Layout,
    children: [{
      path: '',
      name: 'playground',
      component: () => import('@/views/playground/index'),
      meta: { title: '玩测试', icon: 'password' },
      hidden: true
    }]
  }

  // 404 page must be placed at the end !!!
  // { path: '*', redirect: '/404', hidden: true }
]

/**
 * new Router实例化 写箭头函数 - 也是为了复用
 *  第一次实例化会调用这个函数
 *  重置路由 也会调用这个函数
 * @returns
 */
const createRouter = () => new Router({
  mode: 'history', // require service support
  // 关于滚动条行为
  /**
   * scrollBehavior 是个函数 参数有3个，可用可不用
   *@returns 主要逻辑看返回的东西是什么 返回的对象 对象是 {x: number, y:number}
   * 分别对应的是就是横向滚动条位置和纵向滚动条位置 x代表横向滚动条，y代表纵向滚动条
   * 每次切换页面，纵坐标滚动条就会到最顶部
   */
  scrollBehavior: () => ({ y: 0 }), // 管理滚动行为, 让页面切换时回到顶部
  // routes: constantRoutes
  routes: [...constantRoutes] // 临时合并动态路由和静态路由
})

// 实例化router实例
const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465

/**
 * 重置路由
 * 管理员用户 页面权限有A，B，C，D，E
 * 张三用户 页面权限A，B
 *
 *  场景说明
 *  第一步，管理员用户登录，所有的权限 所有页面都能访问
 *  第二步 管理员退出登录张三用户
 *  第三步 张三用户的确只能看到A和B 但是他可以通过url路径去访问C，D，E
 *        如何解决这个bug
 *  第四步 退出的时候调用resetRouter，用于重置所有的路由
 *  按需导出
 */
export function resetRouter() {
  const newRouter = createRouter() // 重新实例化
  // 必须要把所有的matcher 赋值新的router的matcher以完成重置 matcher这个就是用于重置的，固定语法
  router.matcher = newRouter.matcher // reset router
}

export default router // 默认导出
